<template>
	<div class="tpl">
		<slider></slider>

		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/latest">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">最新上架</div>
					</router-link>
				</li>
				
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/latest">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">学府专区</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/">
						<span class="mui-icon mui-icon-chatbubble"></span>
						<div class="mui-media-body">房源</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/">
						<span class="mui-icon mui-icon-location"></span>
						<div class="mui-media-body">图片专区</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">最新楼盘</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">最新楼盘</div>
					</router-link>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link to="/">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">最新楼盘</div>
					</router-link>
				</li>
			</ul>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item mui-active" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/message">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">消息</span>
			</router-link>
			<router-link class="mui-tab-item" to="/fav">
				<span class="mui-icon mui-icon-contact">
					<span class="mui-badge">9</span>
				</span>
				<span class="mui-tab-label">我的收藏</span>
			</router-link>
			<router-link class="mui-tab-item" to="/user">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">用户中心</span>
			</router-link>
		</nav>
	</div>
</template>

<script>
	import slider from "../components/subComponent/slider.vue";

	export default {
		components: {
			slider
		}
	}
</script>

<style scoped>
	.tpl {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	.mui-grid-view.mui-grid-9 {
		background: #FFFFFF;
		border: none;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: none;
	}
	
	
	.mui-icon-home:before,
	.mui-icon-email:before,
	.mui-icon-chatbubble:before,
	.mui-icon-location:before,
	.mui-icon-search:before,
	.mui-icon-phone:before{
		content: '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	
	
	.mui-icon-home:before{		
		background-image: url(../assets/images/add-house.png);
	}

	.mui-icon-email:before{		
		background-image: url(../assets/images/apartment-building.png);		
	}
	.mui-icon-chatbubble:before{		
		background-image: url(../assets/images/house.png);		
	}
	.mui-icon-location:before{		
		background-image: url(../assets/images/lands.png);		
	}
	.mui-icon-search:before{		
		background-image: url(../assets/images/map.png);		
	}
	.mui-icon-phone:before{		
		background-image: url(../assets/images/office-building.png);		
	}
</style>